<template>
    <div class="clock-wrapper">
        <canvas ref="clockCanvas" :width="canvasSize" :height="canvasSize" class="clock-canvas"></canvas>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick } from 'vue'

// Canvas相关
const clockCanvas = ref<HTMLCanvasElement | null>(null)
const canvasSize = 100
const centerX = canvasSize / 2
const centerY = canvasSize / 2
const radius = 40

// 时钟角度
const hourAngle = ref(0)
const minuteAngle = ref(0)
const secondAngle = ref(0)

// 更新时钟
const updateClock = () => {
    const now = new Date()
    const hours = now.getHours()
    const minutes = now.getMinutes()
    const seconds = now.getSeconds()

    // 计算指针角度
    hourAngle.value = (hours % 12) * 30 + minutes * 0.5
    minuteAngle.value = minutes * 6
    secondAngle.value = seconds * 6
}

// 绘制时钟
const drawClock = () => {
    const canvas = clockCanvas.value
    if (!canvas) return

    const ctx = canvas.getContext('2d')
    if (!ctx) return

    // 清空画布
    ctx.clearRect(0, 0, canvasSize, canvasSize)

    // 绘制表盘背景（透明）
    ctx.beginPath()
    ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI)
    ctx.fillStyle = 'transparent'
    ctx.fill()

    // 绘制表盘边框
    ctx.strokeStyle = '#8b7355'
    ctx.lineWidth = 3
    ctx.stroke()

    // 绘制小时刻度（只保留12个主要刻度）
    for (let i = 0; i < 12; i++) {
        const angle = (i * 30 - 90) * Math.PI / 180
        const x1 = centerX + Math.cos(angle) * (radius - 6)
        const y1 = centerY + Math.sin(angle) * (radius - 6)
        const x2 = centerX + Math.cos(angle) * (radius - 2)
        const y2 = centerY + Math.sin(angle) * (radius - 2)

        ctx.beginPath()
        ctx.moveTo(x1, y1)
        ctx.lineTo(x2, y2)
        ctx.strokeStyle = '#6b4423'
        ctx.lineWidth = 1
        ctx.stroke()
    }


    // 绘制时针
    const hourRad = (hourAngle.value - 90) * Math.PI / 180
    const hourX = centerX + Math.cos(hourRad) * 15
    const hourY = centerY + Math.sin(hourRad) * 15

    ctx.beginPath()
    ctx.moveTo(centerX, centerY)
    ctx.lineTo(hourX, hourY)
    ctx.strokeStyle = '#4a3728'
    ctx.lineWidth = 3
    ctx.lineCap = 'round'
    ctx.stroke()

    // 绘制分针
    const minuteRad = (minuteAngle.value - 90) * Math.PI / 180
    const minuteX = centerX + Math.cos(minuteRad) * 22
    const minuteY = centerY + Math.sin(minuteRad) * 22

    ctx.beginPath()
    ctx.moveTo(centerX, centerY)
    ctx.lineTo(minuteX, minuteY)
    ctx.strokeStyle = '#5d4e37'
    ctx.lineWidth = 2
    ctx.lineCap = 'round'
    ctx.stroke()

    // 绘制秒针
    const secondRad = (secondAngle.value - 90) * Math.PI / 180
    const secondX = centerX + Math.cos(secondRad) * 25
    const secondY = centerY + Math.sin(secondRad) * 25

    ctx.beginPath()
    ctx.moveTo(centerX, centerY)
    ctx.lineTo(secondX, secondY)
    ctx.strokeStyle = '#b91c1c'
    ctx.lineWidth = 1
    ctx.lineCap = 'round'
    ctx.stroke()

    // 绘制中心点
    ctx.beginPath()
    ctx.arc(centerX, centerY, 4, 0, 2 * Math.PI)
    ctx.fillStyle = '#2d2d2d'
    ctx.fill()
}

// 定时器
let clockInterval: number | null = null

// 组件挂载时启动时钟
onMounted(async () => {
    await nextTick()
    updateClock()
    drawClock()
    clockInterval = setInterval(() => {
        updateClock()
        drawClock()
    }, 1000)
})

// 组件卸载时清理定时器
onUnmounted(() => {
    if (clockInterval) {
        clearInterval(clockInterval)
    }
})
</script>

<style scoped>
.clock-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
}

.clock-canvas {
    background: transparent;
}
</style>